<template>
  <ul class='list'>
    <li v-for="item in getListData">
      <img class="fl" :src="item.img" alt="">
      <div class="content">
        <p class="title">{{item.name}} <span class="fr">{{item.time}}</span> </p>
        <p class="info">{{item.info}} <span class="fr">{{item.num}}</span> </p>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  props:["data"],
  components: {},
  name: "",
  data() {
    return {};
  },
  computed:{
    getListData(){
      return this.data
    }
  },
  methods: {},
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0 15px;

  li{
    padding: 15px 0;
    min-height: 40px;
    border-bottom: 1px solid #f2f2f2;

    img{
      display: inline-block;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    p{
      margin-left: 55px;
    }
    .title{
      font-size: 14px;
      color: #333;
    }
    
    .content,.fr{
      font-size: 12px;
      color: #999;
    }
    .info{
      margin-right: 20px;

      .fr{
        color: #fff;
        background-color: red;
        border-radius: 5px;
        padding: 2px;
      }
    }
  }
}
</style>